<!-- templates/view_events.html -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DCO Webhook 事件查询</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义 CSS -->
    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">DCO管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <!-- 事件管理菜单项 -->
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('view_events') }}">事件管理</a>
                    </li>
                    <!-- 用户管理菜单项 -->
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('view_installed_users') }}">用户管理</a>
                    </li>
                    <!-- 其他菜单项（如果有） -->
                    <!-- <li class="nav-item">...</li> -->
                </ul>
            </div>
        </div>
    </nav>    

    <!-- 主容器 -->
    <div class="container">
        <h1 class="mb-4 text-center">DCO Webhook 事件查询</h1>

        <!-- 过滤表单 -->
        <form method="get" class="filter-form">
            <div class="row g-3">
                <div class="col-md-3">
                    <label for="repository" class="form-label">仓库名称</label>
                    <input type="text" class="form-control" id="repository" name="repository" value="{{ filters.repository }}">
                </div>
                <div class="col-md-3">
                    <label for="owner" class="form-label">仓库所有者</label>
                    <input type="text" class="form-control" id="owner" name="owner" value="{{ filters.owner }}">
                </div>
                <div class="col-md-3">
                    <label for="pusher" class="form-label">推送者</label>
                    <input type="text" class="form-control" id="pusher" name="pusher" value="{{ filters.pusher }}">
                </div>
                <div class="col-md-3">
                    <label for="invalid_commits" class="form-label">无效提交筛选</label>
                    <select class="form-select" id="invalid_commits" name="invalid_commits">
                        <option value="" {% if not filters.invalid_commits %}selected{% endif %}>所有事件</option>
                        <option value="yes" {% if filters.invalid_commits == 'yes' %}selected{% endif %}>包含无效提交</option>
                        <option value="no" {% if filters.invalid_commits == 'no' %}selected{% endif %}>不包含无效提交</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="date_from" class="form-label">日期从</label>
                    <input type="date" class="form-control" id="date_from" name="date_from" value="{{ filters.date_from }}">
                </div>
                <div class="col-md-3">
                    <label for="date_to" class="form-label">日期到</label>
                    <input type="date" class="form-control" id="date_to" name="date_to" value="{{ filters.date_to }}">
                </div>
                <div class="col-md-9 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">查询</button>
                    <a href="{{ url_for('view_events') }}" class="btn btn-secondary">重置</a>
                </div>
            </div>
        </form>

        <!-- 事件表格 -->
        <div class="table-responsive">
            <table id="eventsTable" class="table table-striped table-hover align-middle">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>仓库名称</th>
                        <th>仓库所有者</th>
                        <th>推送者</th>
                        <th>Ref</th>
                        <th>Before SHA</th>
                        <th>After SHA</th>
                        <th>接收时间</th>
                        <th>无效提交</th>
                    </tr>
                </thead>
                <tbody>
                    {% if not events %}
                        <tr>
                            <td colspan="9" class="text-center">没有找到匹配的事件。</td>
                        </tr>
                    {% else %}
                        {% for event in events %}
                            <tr>
                                <td>{{ event.id }}</td>
                                <td>{{ event.repository_name }}</td>
                                <td>{{ event.repository_owner }}</td>
                                <td>{{ event.pusher }}</td>
                                <td>{{ event.ref }}</td>
                                <td>{{ event.before_sha }}</td>
                                <td>{{ event.after_sha }}</td>
                                <td>{{ event.received_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                <td>
                                    {% if event.invalid_commits %}
                                        <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modal{{ event.id }}">
                                            查看 ({{ event.invalid_commits|length }})
                                        </button>

                                        <!-- 模态框 -->
                                        <div class="modal fade" id="modal{{ event.id }}" tabindex="-1" aria-labelledby="modalLabel{{ event.id }}" aria-hidden="true">
                                            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="modalLabel{{ event.id }}">无效提交详情 (事件 ID: {{ event.id }})</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        {% for commit in event.invalid_commits %}
                                                            <div class="mb-4">
                                                                <h6>Commit SHA: <a href="{{ commit.url }}" target="_blank">{{ commit.sha }}</a></h6>
                                                                <p><strong>作者:</strong> {{ commit.author }}</p>
                                                                <p><strong>消息:</strong></p>
                                                                <p class="preformatted">{{ commit.message | replace('\n', '<br>') | safe }}</p>
                                                                <p><strong>链接:</strong> <a href="{{ commit.url }}" target="_blank">查看提交</a></p>
                                                            </div>
                                                            <hr>
                                                        {% endfor %}
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% else %}
                                        无
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义 JS -->
    <script>
        // 自动隐藏模态框内容时确保内容初始隐藏
        document.addEventListener('DOMContentLoaded', function() {
            // 此处可添加额外的 JavaScript 逻辑
        });
    </script>
</body>
</html>
